<template>
  <div class="article-list">
    <search-list ref="campList" :api-url="$url.ArticleList" :option="searchOpt" :itemPerRow="8">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column label="预览地址" width="310">
        <template slot-scope="scope">
          <p>
            PC版本:
            <a :href="`https://ke.movtile.com/article/${scope.row.id}`" target="_blank">
              https://ke.movtile.com/article/{{ scope.row.id }}
            </a>
          </p>
          <p>
            移动端版本
            <a :href="`https://ke.movtile.com/article/${scope.row.id}?hl=1`" target="_blank">
              https://ke.movtile.com/article/{{ scope.row.id }}?hl=1
            </a>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="150px"></el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" width="150px"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="check(scope.row)">修改</el-button>
        </template>
      </el-table-column>

      <div class="btn-after" slot="btn-after">
        <el-button icon="el-icon-plus" @click="add">新增文章</el-button>
      </div>
    </search-list>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'id',
            label: '文章ID',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'name',
            label: '文章名称',
          },
        ],
      };
    },
    methods: {
      /**
       * 管理
       */
      check(row) {
        const { id } = row;
        this.$tabs.open({ name: 'ArticleDetail', params: { id } });
      },
      /**
       * 新增
       */
      add() {
        this.$tabs.open({ name: 'ArticleDetail' });
      },
    },
  };
</script>

<style lang="less" scoped></style>
